<template>
    <div class="code-generate-page">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button type="primary" @click="addRootPermission()">新增一级权限</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" row-key="id"
            :tree-props="{ children: 'children' }" style="width: 100%;">
            <el-table-column prop="name" header-align="center" align="center" label="权限名称" />
            <el-table-column prop="url" header-align="center" align="center" label="权限路径" />
            <el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="typeFormatter" />
            <el-table-column prop="icon" header-align="center" align="center" label="菜单图标" />
            <el-table-column prop="orderNum" header-align="center" align="center" label="排序" />
            <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="updatePermission(scope.row)">修改</el-button>
                    <el-button type="text" size="mini" @click="deleteHandle(scope.row.id)">删除</el-button>
                    <el-button type="text" size="mini" @click="addSubPermission(scope.row)">添加下级权限</el-button>
                    <el-button type="text" size="mini" v-if="scope.row.type != 0"
                        @click="permissionGrantApiHandle(scope.row.id)">分配接口</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
        <!-- 分配接口 -->
        <permissioon-grant-api v-if="permissioonGrantApiVisible" ref="permissionGrantApi"
            @refreshDataList="getDataList" />
    </div>
</template>

<script>
import AddOrUpdate from './permission-add-or-update'
import PermissioonGrantApi from './permission-grant-api'
export default {
    data() {
        return {
            dataForm: {
                key: ''
            },
            dataList: [],
            dataListLoading: false,
            addOrUpdateVisible: false,
            permissioonGrantApiVisible: false
        }
    },
    components: {
        AddOrUpdate,
        PermissioonGrantApi
    },
    activated() {
        this.getDataList()
    },
    methods: {
        // 获取数据列表
        getDataList() {
            this.dataListLoading = true
            this.$http({
                url: '/pms/admin/permission/listMenuInfoOfTree',
                method: 'post',
                data: {}
            }).then((response) => {
                if (response && response.code == "0") {
                    this.dataList = response.data
                } else {
                    this.dataList = []
                }
                this.dataListLoading = false
            })
        },
        // 新增一级权限
        addRootPermission(){
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(0)
            })
        },
        // 添加下级权限
        addSubPermission(data){
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(1,data)
            })
        },
        // 更新权限信息
        updatePermission(data){
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(2,data)
            })
        },
        // 删除
        deleteHandle(id) {
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: '/pms/admin/permission/deletePermission',
                    method: 'post',
                    data: {
                        permissionId: id
                    }
                }).then((response) => {
                    if (response && response.code == "0") {
                        this.getDataList();
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500
                        })
                    } else {
                        this.$message.error(response.message)
                    }
                })
            })
        },
        typeFormatter(row) {
            switch (row.type) {
                case 0:
                    return "目录";
                case 1:
                    return "菜单";
                case 2:
                    return "按钮";
                default:
                    return "未知权限";
            }
        },
        // 分配接口弹窗
        permissionGrantApiHandle(id) {
            this.permissioonGrantApiVisible = true;
            this.$nextTick(() => {
                this.$refs.permissionGrantApi.init(id)
            })
        }
    }
}
</script>
